<template>
  <div>
    <el-row>
      <el-col
        style="width: 20%; height: 20%"
        :span="2"
        v-for="(list, index) in lists"
        :key="index"
      >
        <el-card body-style="{  '0px' }">
          <el-badge value="优惠价" class="item" type="danger ">
            <div style="padding: 24px">
              <center>
                <span>优惠价格:{{ list.cnPrice }}</span>
                <br />         
                <el-tag type="danger" effect="dark">
                  满减:{{ list.cnLimit }}元</el-tag
                >
                <br />    
                <span>商品:{{ list.commodity.cmName }}</span>     <br />
                <div class="bottom clearfix">
                  <time class="time">优惠过期时间:{{ list.cnExpireDate }}</time>
                </div>
                <br />
                <el-button
                  type="primary"
                  @click="saveCoupon(list.cnId)"
                  :disabled="list.userIf"
                  >领取优惠卷</el-button
                >
              </center>
            </div></el-badge
          >
        </el-card>
      </el-col>
    </el-row>

    <center>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :v-model="page"
        @current-change="currentChage"
        :prev-click="currentChage"
      >
      </el-pagination>
    </center>
  </div>
</template>

<script>
import coupon from "@/api/coupon";
export default {
  data() {
    return {
      lists: [],
      page: 1,
      size: 20,
      key: "",
      pages: 0,
      total: 0,
    };
  },

  methods: {
    //领取优惠卷
    saveCoupon(id) {
      var urcn = { cnId: id };
      coupon.saveCoupon(urcn).then((res) => {
        this.$message({
          type: "success",
          message: "优惠卷领取成功!",
        });
        this.getList(this.page, this.size);
      });
    },
    getList(page, size) {
      coupon.getList(page, size).then((res) => {
        console.log(res.data.data);
        this.lists = res.data.data.list;
        this.page = res.data.data.page;
        this.size = res.data.data.size;
        this.pages = res.data.data.pages;
        this.total = res.data.data.total;
      });
    },
    currentChage(e) {
      this.getList(e, this.size, this.key);
    },
  },

  created() {
    this.getList(this.page, this.size);
  },
};
</script>

<style>
</style>